<template>
  <div class="streaming-text-container">
    <div class="text-content" v-html="renderedContent"></div>
    <div v-if="isStreaming" class="streaming-indicator">
      <span class="streaming-dot"></span>
    </div>
  </div>
</template>

<script>
import { renderContent } from '@/utils/highlight.js'

export default {
  name: 'StreamingText',
  props: {
    // 要显示的文本内容
    content: {
      type: String,
      default: ''
    },
    // 是否正在流式传输
    isStreaming: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // 渲染后的内容（支持Markdown）
    renderedContent() {
      if (!this.content) return ''
      
      const options = {
        markdown: true,
        codeHighlight: true,
        linkNewWindow: true,
        purifyHtml: true,
        forceMarkdown: true
      }
      return renderContent(this.content, options)
    }
  },
  watch: {
    // 监听内容变化，自动滚动到底部
    content() {
      this.$nextTick(() => {
        this.$emit('content-updated')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@use "@/styles/variables.scss" as *;

.streaming-text-container {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;

  .text-content {
    flex: 1;
    font-size: var(--im-font-size-base, 14px);
    line-height: 1.8;
    color: var(--im-text-color-primary, #303133);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;

    // Markdown样式优化
    :deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
      margin: var(--im-spacing-md, 16px) 0 var(--im-spacing-xs, 8px);
      color: var(--im-color-primary, #409eff);
    }

    :deep(p) {
      margin: var(--im-spacing-xs, 8px) 0;
    }

    :deep(code) {
      background: var(--im-code-bg, linear-gradient(135deg, rgba(245, 247, 250, 0.9) 0%, rgba(240, 244, 255, 0.8) 100%));
      padding: 3px var(--im-spacing-xs, 8px);
      border-radius: var(--im-border-radius-sm, 6px);
      font-family: var(--im-font-family-mono, 'Fira Code', 'Consolas', 'Monaco', monospace);
      border: 1px solid rgba(64, 158, 255, 0.1);
      color: var(--im-color-primary, #409eff);
      font-weight: 500;
      font-size: 13px;
    }

    :deep(pre) {
      background: var(--im-pre-bg, linear-gradient(135deg, rgba(245, 247, 250, 0.95) 0%, rgba(240, 244, 255, 0.9) 100%));
      padding: var(--im-spacing-md, 16px);
      border-radius: var(--im-border-radius-lg, 12px);
      overflow-x: auto;
      margin: var(--im-spacing-md, 16px) 0;
      max-width: 100%;
      box-sizing: border-box;
      border: 1px solid rgba(64, 158, 255, 0.15);
      border-left: 4px solid var(--im-color-primary, #409eff);
      position: relative;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--im-color-primary, #409eff), transparent);
        opacity: 0.3;
      }

      code {
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-wrap: break-word;
        background: transparent;
        border: none;
        padding: 0;
        color: var(--im-text-color-primary, #303133);
        font-size: 13px;
        line-height: 1.6;
      }
    }

    :deep(blockquote) {
      border-left: 4px solid var(--im-color-primary, #409eff);
      padding: var(--im-spacing-sm, 12px) var(--im-spacing-md, 16px);
      margin: var(--im-spacing-md, 16px) 0;
      background: linear-gradient(135deg, rgba(64, 158, 255, 0.05) 0%, rgba(64, 158, 255, 0.02) 100%);
      border-radius: var(--im-border-radius-base, 8px);
      color: var(--im-text-color-secondary, #606266);
      font-style: italic;
      position: relative;

      &::before {
        content: '"';
        position: absolute;
        top: 8px;
        left: 8px;
        font-size: 24px;
        color: var(--im-color-primary, #409eff);
        opacity: 0.3;
        font-family: serif;
      }
    }

    :deep(ul), :deep(ol) {
      padding-left: 20px;
      margin: var(--im-spacing-xs, 8px) 0;
    }

    :deep(li) {
      margin: var(--im-spacing-xs, 4px) 0;
    }

    // 表格样式优化
    :deep(table) {
      width: 100%;
      max-width: 100%;
      border-collapse: collapse;
      margin: 12px 0;
      overflow-x: auto;
      display: block;
      white-space: nowrap;

      thead, tbody, tr {
        display: table;
        width: 100%;
        table-layout: fixed;
      }

      th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      th {
        background-color: var(--im-table-header-bg, #f5f7fa);
        font-weight: 600;
      }
    }
  }

  .streaming-indicator {
    display: flex;
    align-items: center;
    margin-left: var(--im-spacing-xs, 4px);
    position: relative;

    .streaming-dot {
      width: 8px;
      height: 8px;
      background: linear-gradient(45deg, var(--im-color-primary, #409eff), rgba(64, 158, 255, 0.7));
      border-radius: 50%;
      animation: streaming-pulse 1.2s infinite;
      box-shadow: 0 0 8px rgba(64, 158, 255, 0.4);
      position: relative;

      &::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, var(--im-color-primary, #409eff), transparent);
        border-radius: 50%;
        opacity: 0.3;
        animation: streaming-ring 2s infinite;
      }
    }
  }
}

// 动画效果
@keyframes streaming-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.3);
  }
}

@keyframes streaming-ring {
  0% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

// === 深色模式适配 ===
:root[data-theme='dark'] {
  .streaming-text-container {
    .text-content {
      color: var(--im-text-color-primary);

      // Markdown在深色模式下的样式
      :deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
        color: var(--im-color-primary);
      }

      :deep(code) {
        background: linear-gradient(135deg, var(--im-bg-secondary) 0%, var(--im-bg-primary) 100%) !important;
        color: var(--im-text-color-primary) !important;
        border-color: rgba(64, 158, 255, 0.2) !important;
      }

      :deep(pre) {
        background: linear-gradient(135deg, var(--im-bg-secondary) 0%, var(--im-bg-primary) 100%) !important;
        border-color: rgba(64, 158, 255, 0.25) !important;

        code {
          color: var(--im-text-color-primary) !important;
        }
      }

      :deep(blockquote) {
        background: linear-gradient(135deg, rgba(64, 158, 255, 0.08) 0%, rgba(64, 158, 255, 0.04) 100%) !important;
        border-left-color: var(--im-color-primary) !important;
        color: var(--im-text-color-secondary) !important;
      }

      // 表格在深色模式下的样式
      :deep(table) {
        th, td {
          border-color: var(--im-border-color) !important;
          color: var(--im-text-color-primary) !important;
        }

        th {
          background-color: var(--im-bg-secondary) !important;
        }
      }
    }

    .streaming-indicator {
      .streaming-dot {
        background: var(--im-color-primary);
      }
    }
  }
}
</style>
